<template>
    <div class="common-list comp-company-demands" v-loading.fullscreen="loading">
        <div class="common-list__head">
            <el-input class="filter" v-model="filters.title" size="small" style="width: 320px" clearable placeholder="请输入" :readonly="loading" @change="search(true)">
                <span slot="prepend">需求标题</span>
            </el-input>
            <el-select class="filter" v-model="filters.type" size="small" style="width: 160px" @change="search(true)">
                <el-option label="不限需求类型" :value="null"></el-option>
                <el-option v-for="data in env.demandTypes" :key="data.id" :label="data.name" :value="data.value"></el-option>
            </el-select>
            <el-select class="filter" v-model="filters.approved" size="small" style="width: 140px" @change="search(true)">
                <el-option label="不限审核状态" :value="null"></el-option>
                <el-option v-for="data in env.demandApproveds" :key="data.id" :label="data.name" :value="data.value"></el-option>
            </el-select>
            <el-select class="filter" v-model="filters.status" size="small" style="width: 140px" @change="search(true)">
                <el-option label="不限需求状态" :value="null"></el-option>
                <el-option v-for="data in env.demandStatus" :key="data.id" :label="data.name" :value="data.value"></el-option>
            </el-select>
            <el-button class="filter" type="primary" size="small" @click="search()">查询</el-button>
            <el-button class="filter" type="plain" size="small" @click="reset(true)">重置</el-button>
        </div>
        <div class="common-list__nect">
            <slot name="head" :loading="loading" :filters="filters" :selects="selects"></slot>
        </div>
        <div class="common-list__body">
            <el-table ref="table" size="medium" height="100%" :data="list" @header-click="onTableHeaderClick" @row-click="onTableRowClick" @selection-change="onTableSelectionChange">
                <el-table-column type="selection" align="center" v-if="select"></el-table-column>
                <el-table-column label="需求标题/需求类型" min-width="8">
                    <template #default="scope">
                        <span>{{ scope.row.title }}</span>
                        <div style="color: #aaa">{{ scope.row.typeText }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="联系人/联系电话" min-width="6">
                    <template #default="scope">
                        <span>{{ scope.row.contacts.name }}</span>
                        <div style="color: #aaa">{{ scope.row.contacts.mobile }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="需求附件" min-width="12">
                    <template #default="scope">
                        <comp-files-viewer :files="scope.row.files" v-if="scope.row.files.length > 0"></comp-files-viewer>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" min-width="4">
                    <template #default="scope">
                        <span class="el-status--warning" v-if="scope.row.approved === 'waiting'"></span>
                        <span class="el-status--success" v-else-if="scope.row.approved === 'yes'"></span>
                        <span class="el-status--danger" v-else-if="scope.row.approved === 'not'"></span>
                        <span>{{ scope.row.approvedText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="需求状态" min-width="4">
                    <template #default="scope">
                        <span class="el-status--danger" v-if="scope.row.status === 'published'"></span>
                        <span class="el-status--warning" v-else-if="scope.row.status === 'starting'"></span>
                        <span class="el-status--success" v-else-if="scope.row.status === 'handling'"></span>
                        <span class="el-status--info" v-else-if="scope.row.status === 'finished'"></span>
                        <span>{{ scope.row.statusText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="需求回复" min-width="4">
                    <template #default="scope">
                        <a href="javascript:;" @click.stop.prevent="getDemandRecords(scope.row)">点击查看</a>
                    </template>
                </el-table-column>
                <el-table-column label="提交人/提交时间" min-width="6">
                    <template #default="scope">
                        <span>{{ scope.row.creator.name }}</span>
                        <span style="margin-left: 0.5em; color: #aaa">{{ scope.row.creator.number }}</span>
                        <div style="color: #aaa">{{ scope.row.createdAt }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :width="160" v-if="$slots.body || $scopedSlots.body">
                    <template #default="scope">
                        <slot name="body" :loading="loading" :filters="filters" :data="scope.row" :selects="selects"></slot>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common-list__foot" :class="{ 'common-list__foot--slot': $slots.foot || $scopedSlots.foot }">
            <el-pagination background layout="total,sizes,prev,pager,next,jumper" :page-sizes="[10, 20, 50, 100]" :page-size="filters.linage" :current-page="filters.page" :total="filters.total" @size-change="onTableLinageChange" @current-change="onTablePageChange"></el-pagination>
            <slot name="foot" :loading="loading" :filters="filters" :selects="selects"></slot>
        </div>
        <comp-dialog title="查看回复" width="60vw" height="80vh" ref="demandRecords">
            <comp-demand-records style="height: 100%" ref="demandRecordsList" :demandId="demand.id" v-if="demand">
                <template #foot="scope">
                    <el-button type="plain" size="small" icon="el-icon-close" @click="getDemandRecords()">关闭</el-button>
                </template>
            </comp-demand-records>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { object, array, string, int, session } from "../util";
    export default {
        name: "comp-company-demands",
        mixins: [mixin],
        props: {
            companyId: { type: String, default: null },
            category: { type: String, default: null },
            select: { type: Boolean, default: false },
            link: { type: Boolean, default: false },
        },
        data: () => ({
            loading: false,
            filters: {
                ids: null,
                companyId: null,
                category: null,
                type: null,
                title: null,
                approved: null,
                status: null,
                linage: 10,
                page: 1,
                total: 0,
            },
            list: [],
            selects: [],
            demand: null,
        }),
        methods: {
            reset(deep) {
                let data = deep ? {} : object(session([this.env.key, this.$options.name, "filters", this.$route.fullPath]));
                this.filters = Object.assign(this.$options.data().filters, data);
                this.search(true);
            },
            validate() {
                let filters = this.filters;
                filters.ids = null;
                filters.companyId = this.companyId;
                filters.category = this.category;
                filters.total = Math.max(int(filters.total), 0);
                filters.linage = Math.max(int(filters.linage), 1);
                filters.page = Math.max(Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)), 1);
                session([this.env.key, this.$options.name, "filters", this.$route.fullPath], filters);
            },
            onTableHeaderClick() {
                this.select && this.$refs.table.toggleAllSelection();
            },
            onTableRowClick(row) {
                this.select && this.$refs.table.toggleRowSelection(row);
            },
            onTableLinageChange(value) {
                this.filters.linage = value;
                this.search(true);
            },
            onTablePageChange(value) {
                this.filters.page = value;
                this.search(true);
            },
            onTableSelectionChange(selects) {
                this.filters.ids = selects.map((data) => data.id);
                this.selects = selects;
            },
            getDemandRecords(demand) {
                if (this.loading) return;
                if (demand) {
                    this.demand = demand;
                    this.$refs.demandRecords.init();
                    this.$nextTick(() => this.$refs.demandRecordsList.init());
                } else {
                    this.$refs.demandRecords.close();
                }
            },
            search(clean) {
                if (this.loading) return;
                if (clean) this.list = [];
                if (clean) this.selects = [];
                let filters = this.filters;
                this.validate();
                this.loading = true;
                this.plugins.user.getCompanyDemands(filters).then((res) => {
                    this.loading = false;
                    this.list = [];
                    this.selects = [];
                    this.$nextTick(() => this.$refs.table.doLayout());
                    if (res.code === 0) {
                        let data = res.data;
                        if (data.page > 1 && data.list.length === 0) {
                            filters.total = 0;
                            this.search();
                        } else {
                            filters.total = data.total;
                            this.list = data.list;
                            this.validate();
                        }
                    } else {
                        filters.total = 0;
                        this.validate();
                        this.plugins.modal.toast("列表加载失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            init() {
                this.loading = false;
                this.reset();
            },
        },
    };
</script>

<style lang="scss">
    .comp-company-demands {
        overflow: hidden;
    }
</style>